<template>
  <div class="TreasureChest">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">百宝箱</div>
    </div>-->

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="carousel">
        <img src="../../assets/BBX/bigPic1.png" />
      </div>
      <div class="entranceList">
        <!-- 功能入口按钮区域 -->
        <div class="entrance">
          <div class="etRowBox">
            <div class="etButton" @click="entranceTo(0)">
              <img slot="icon" :src="icons[8]" />
              <span class="ideText">行政审批</span>
            </div>
            <div class="etButton" @click="entranceTo(1)">
              <img slot="icon" :src="icons[0]" />
              <span class="ideText">人武部</span>
            </div>

            <div class="etButton" @click="entranceTo(2)">
              <img slot="icon" :src="icons[1]" />
              <span class="ideText">计生</span>
            </div>
          </div>
          <div class="etRowBox">
            <div class="etButton" @click="entranceTo(3)">
              <img slot="icon" :src="icons[2]" />
              <span class="ideText">统战</span>
            </div>
            <div class="etButton" @click="entranceTo(4)">
              <img slot="icon" :src="icons[3]" />
              <span class="ideText">残联</span>
            </div>
            <div class="etButton" @click="entranceTo(5)">
              <img slot="icon" :src="icons[4]" />
              <span class="ideText">民政</span>
            </div>
          </div>
          <div class="etRowBox">
            <div class="etButton" @click="entranceTo(6)">
              <img slot="icon" :src="icons[5]" />
              <span class="ideText">劳保</span>
            </div>

            <div class="etButton" @click="entranceTo(7)">
              <img slot="icon" :src="icons[6]" />
              <span class="ideText">城管</span>
            </div>
            <div class="etButton" @click="entranceTo(8)">
              <img slot="icon" :src="icons[7]" />
              <span class="ideText">环保</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TreasureChest",
  data() {
    return {
      icons: [
        require("../../assets/treasureChest/treasure_05-07.png"),
        require("../../assets/treasureChest/treasure_05-09.png"),
        require("../../assets/treasureChest/treasure_05-14.png"),
        require("../../assets/treasureChest/treasure_05-15.png"),
        require("../../assets/treasureChest/treasure_05-16.png"),
        require("../../assets/treasureChest/treasure_05-20.png"),
        require("../../assets/treasureChest/treasure_05-21.png"),
        require("../../assets/treasureChest/treasure_05-22.png"),
        require("../../assets/treasureChest/treasure_05.png")
      ],

      thirdPageData: ""
    };
  },
  created() {
    this.requestPosTreasureChest();
  },
  methods: {
    back() {
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    entranceTo(w) {
      let _that = this;
      switch (w) {
        case 0:
          window.open(
            "http://zwbweixin.dongying.gov.cn:8280/WeChat/index.html"
          );
          // this.$router.push({
          //   path: "/treasureChest_1",
          //   query: {
          //     thirdPageData: _that.thirdPageData[0]
          //   }
          // });
          break;
        case 1:
          this.$router.push({
            path: "/treasureChest_2",
            query: {
              thirdPageData: _that.thirdPageData[1]
            }
          });
          break;
        case 2:
          this.$router.push({
            path: "/treasureChest_3",
            query: {
              thirdPageData: _that.thirdPageData[2]
            }
          });
          break;
        case 3:
          this.$router.push({
            path: "/treasureChest_4",
            query: {
              thirdPageData: _that.thirdPageData[3]
            }
          });
          break;
        case 4:
          this.$router.push({
            path: "/treasureChest_5",
            query: {
              thirdPageData: _that.thirdPageData[4]
            }
          });
          break;
        case 5:
          this.$router.push({
            path: "/treasureChest_6",
            query: {
              thirdPageData: _that.thirdPageData[5]
            }
          });
          break;
        case 6:
          this.$router.push({
            path: "/treasureChest_7",
            query: {
              thirdPageData: _that.thirdPageData[6]
            }
          });
          break;
        case 7:
          this.$router.push({
            path: "/treasureChest_8",
            query: {
              thirdPageData: _that.thirdPageData[7]
            }
          });
          break;
        case 8:
          this.$router.push({
            path: "/treasureChest_9",
            query: {
              thirdPageData: _that.thirdPageData[8]
            }
          });
          break;
        default:
          this.$router.push("/home");
      }
    },

    requestPosTreasureChest() {
      this.post("treasure/loadInfo", {})
        .then(res => {
          console.log("treasureChest", res.array);
          this.thirdPageData = res.array;
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.TreasureChest {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;

    .carousel {
      margin: 0;
      padding: 0;
      height: $sm-img-per-mini;
      width: $sm-img-per-max;

      img {
        height: $sm-img-per-max;
        width: $sm-img-per-max;
      }
    }

    .entranceList {
      padding: $sm-spacing-col-xl 0 0 0;
      height: calc(100vh - 30%);

      background: $sm-bg-color;

      .entrance {
        padding: 0 $sm-spaceing-block-base $sm-spaceing-block-sm
          $sm-spaceing-block-base;

        background: $sm-bg-color;

        .etRowBox {
          display: flex;
          flex-direction: row nowrap;
          justify-content: space-between;

          .etButton {
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              width: $sm-img-per-lg;
              height: $sm-img-per-lg;
              margin: $sm-spacing-row-lg;
            }

            .ideText {
              font-size: $sm-font-sizeVH-sm;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>